<template>
  <div>
    <!--头部-->
    <base-info ref="baseInfo"/>
    <!--小方块-->
    <grid-menu class="mb20 mt20" hidden/>
    <!--统计-->
    <visit-chart ref="visitChart"/>
    <!--用户-->
    <!--    <user-chart ref="userChart" class="mb20" />-->
<!--    <el-row :gutter="24" style="width: 99%;margin: 0 auto" >-->
<!--      <el-col class="ivu-mb mb10 dashboard-console-visit" >-->
<!--        <el-card :bordered="false" dis-hover>-->
<!--          <div slot="header">-->
<!--            <div class="acea-row row-middle">-->
<!--              <div class="header_title">所属行业</div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div style="height: 300px;background-color: #fff;" class="chart" id="chart3"></div>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--    </el-row>-->
  </div>
</template>

<script>
import baseInfo from './components/baseInfo'; //首页顶部统计
import gridMenu from './components/gridMenu'; //快捷入口
import visitChart from './components/visitChart';
// import userChart from './components/userChart'; //用户统计
import { checkPermi } from "@/utils/permission";
import { industryStatisticsApi } from '@/api/dashboard' // 权限判断函数
export default {
  name: 'Dashboard',
  components: { baseInfo, gridMenu, visitChart,
    // userChart
  },
  data() {
    return {
      authStatus:null,
      authHost:'',
      xArr:[],
      yArr:[],
      authQueryStatus:false,
      chartData:{
        chart1:{
          chart:null,
          loading:true
        },
        chart2:{
          chart:null,
          loading:true
        },
        chart3:{
          chart:null,
          loading:true
        },
        chart4:{
          chart:null,
          loading:true
        },
      },
    }
  },
  methods:{

    checkPermi,
    // initChart3(){
    //   let myCharts = this.$echarts.init(document.getElementById('chart3'));
    //   myCharts.showLoading({
    //     text:'加载中',
    //     textColor:'#fff',
    //     maskColor:'rgba(0,0,0,0)'
    //   })
    //   let option = {
    //     tooltip: {
    //       trigger: 'axis',
    //       axisPointer: {
    //         type: 'shadow'
    //       }
    //     },
    //     grid: {
    //       top:'18%',
    //       left: '5%',
    //       right: '0',
    //       bottom: '35%',
    //     },
    //     color: ['#ff824a', '#fcc727'],
    //     legend: {
    //       top:0,
    //       right:0,
    //       show: true,
    //       itemWidth: 30,
    //       itemHeight: 15,
    //       textStyle: {
    //         color: "#fff"
    //       },
    //       // data: ['男', '女'],
    //     },
    //     xAxis: {
    //       // data: ['农、林、牧、渔业', '采矿业', '制造业', '电力、热力、燃气及水生产和供应业', '建筑业', '交通运输、仓储和邮政业', '信息传输、软件和信息技术服务业', '批发和零售业', '住宿和餐饮业', '金融业', '房地产业', '租赁和商务服务业', '科学研究和技术服务业', '水利、环境和公共设施管理业', '居民服务、修理和其他服务业', '教育', '卫生和社会工作', '文化、体育和娱乐业', '公共管理、社会保障和社会组织', '国际组织'],
    //       data: [],
    //       axisLabel: {
    //         interval:0,
    //         // rotate:60,
    //         textStyle: {
    //           color: '#000000',
    //           fontSize: '11',
    //         },
    //         formatter: function (value) {
    //           var ret = '';
    //           var maxLength = 5;
    //           var valLength = value.length;
    //           var rowN = Math.ceil(valLength / maxLength);
    //           if (rowN > 1) {
    //             for (var i = 0; i < rowN; i++) {
    //               var temp = '';
    //               var start = i * maxLength;
    //               var end = start + maxLength;
    //               temp = value.substring(start, end) + '\n';
    //               ret += temp;
    //             }
    //             return ret;
    //           } else {
    //             return value;
    //           }
    //         }
    //       }
    //     },
    //     yAxis: {
    //       name: '单位：人',
    //       nameTextStyle:{
    //         color:'#000',
    //         fontSize:12
    //       },
    //       splitLine: {//分割线配置
    //         show:true,
    //         lineStyle: {
    //           color: "rgba(255,255,255,.1)",
    //         }
    //       },
    //       axisLabel: {
    //         textStyle: {
    //           color: '#000',
    //         }
    //       }
    //     },
    //     series: [{
    //       name:'人数',
    //       // data: getNum(20,4000,2000),
    //       data:[],
    //       type: 'bar',
    //       barWidth:13,
    //       itemStyle: {
    //         normal: {
    //           label:{
    //             show:true,
    //             position:'top',
    //             textStyle:{
    //               color:'#000',
    //               fontSize:14
    //             },
    //           },
    //           barBorderRadius:[15, 15, 15, 15],
    //           color:new this.$echarts.graphic.LinearGradient(1,0,0,0,[{
    //             offset:0,
    //             color:'#09ace5'
    //           },{
    //             offset:1,
    //             color:'#3fe3a9'
    //           }])
    //         }
    //       }
    //     }
    //     ]
    //   };
    //   industryStatisticsApi().then((res) => {
    //     let data=res || []
    //     let data1=[];
    //     let data2=[];
    //     data.forEach(item =>{
    //       data1.push(item.name);
    //       data2.push(item.value);
    //     })
    //     option.xAxis.data=data1;
    //     option.series[0].data = data2;
    //     myCharts.hideLoading();
    //     myCharts.setOption(option);
    //   }).catch((res) => {
    //      console.log(res)
    //   })
    //
    //
    // },
  },
  mounted() {
    // this.initChart3()
    // this.getStatistics();
  },
}
</script>

